// 下部分图例
let ShiftLinearScaleb = d3.scaleLinear().domain([0, 130]).range([0, 1])
var LevelColorScale1 = d3.interpolate('maroon', '#F5DC99')
var LevelColorScale2 = d3.interpolate('#F5DC99', 'navy')
let svgLegendb = d3.select('#legend').append('svg').attr('width', '100%').attr('height', '100%')
let groupLegendb = svgLegendb.append('g')
    //渐变条
svgLegendb.append('g')
    .selectAll('rect')
        .data(d3.range(260)).enter()
        .append('rect')
        .attr('x', 20)
        .attr('y', (d,i) => i * 1 + 30)
        .attr('width', 30)
        .attr('height', 1.7)
        .style('fill', (d,i) => {
            if(d <= 130) {
                return LevelColorScale1(ShiftLinearScaleb(d))
            } else if(d >= 130) {
                return LevelColorScale2(ShiftLinearScaleb(d - 130))
            }
        })
    // 文字
groupLegendb.append('text')
    .text('high')
    .attr('transform', 'translate(20, 22)')
    .attr('font-size', 15)
    .attr('font-weight', 'bolder')
groupLegendb.append('text')
    .text('low')
    .attr('transform', 'translate(22, 308)')
    .attr('font-size', 15)
    .attr('font-weight', 'bolder')

// 中间的图例
let svgLegenda = d3.select('#middleLegend')
let ShiftLinearScalea = d3.scaleLinear().domain([0, 115]).range([0, 1])
var LevelColorScale3 = d3.interpolate('darkgreen', '#F5DC99')
var LevelColorScale4 = d3.interpolate('#F5DC99', 'maroon')
let groupLegenda = svgLegenda.append('g')
    //渐变条
svgLegenda.append('g')
    .selectAll('rect')
        .data(d3.range(230)).enter()
        .append('rect')
        .attr('x', (d,i) => i * 1 + 28)
        .attr('y', 0)
        .attr('width', 1.7)
        .attr('height', 25)
        .style('fill', (d,i) => {
            if(d <= 115) {
                return LevelColorScale3(ShiftLinearScalea(d))
            } else if(d >= 115) {
                return LevelColorScale4(ShiftLinearScalea(d - 115))
            }
        })
    // 文字
groupLegenda.append('text')
    .text('high')
    .attr('transform', 'translate(260, 18)')
    .attr('font-size', 15)
    .attr('font-weight', 'bolder')
groupLegenda.append('text')
    .text('low')
    .attr('transform', 'translate(0, 18)')
    .attr('font-size', 15)
    .attr('font-weight', 'bolder')